import { EChartsOption } from 'echarts'

const { t } = useI18n()

// export const lineOptions: EChartsOption = {
//   title: {
//     text: t('analysis.monthlySales'),
//     left: 'center'
//   },
//   xAxis: {
//     data: [
//       t('analysis.january'),
//       t('analysis.february'),
//       t('analysis.march'),
//       t('analysis.april'),
//       t('analysis.may'),
//       t('analysis.june'),
//       t('analysis.july'),
//       t('analysis.august'),
//       t('analysis.september'),
//       t('analysis.october'),
//       t('analysis.november'),
//       t('analysis.december')
//     ],
//     boundaryGap: false,
//     axisTick: {
//       show: false
//     }
//   },
//   grid: {
//     left: 20,
//     right: 20,
//     bottom: 20,
//     top: 80,
//     containLabel: true
//   },
//   tooltip: {
//     trigger: 'axis',
//     axisPointer: {
//       type: 'cross'
//     },
//     padding: [5, 10]
//   },
//   yAxis: {
//     axisTick: {
//       show: false
//     }
//   },
//   legend: {
//     data: [t('analysis.estimate'), t('analysis.actual')],
//     top: 50
//   },
//   series: [
//     {
//       name: t('analysis.estimate'),
//       smooth: true,
//       type: 'line',
//       data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
//       animationDuration: 2800,
//       animationEasing: 'cubicInOut'
//     },
//     {
//       name: t('analysis.actual'),
//       smooth: true,
//       type: 'line',
//       itemStyle: {},
//       data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
//       animationDuration: 2800,
//       animationEasing: 'quadraticOut'
//     }
//   ]
// }
export const lineOptions: EChartsOption = {
  legend: {
    bottom: '0',
    // right: '0',
    icon: 'rect',
    itemWidth: 12,
    itemHeight: 8,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      color: '#BFBFBF',
      rich: {
          a: {
             verticalAlign: 'middle',
          },
      },
      padding:[0,0,0,0],  //[上、右、下、左]
    }
    // data: ['综合得分', '规则得分', '人工得分', '模型得分']
  },
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: 40,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    // boundaryGap: false,
    splitLine:{
      show: false,
      lineStyle:{
          width: 1,
          color: '#BFBFBF'
      },
    },
    axisLine: {
      lineStyle: {
        color: '#BFBFBF'
      }
    },
    data: []
    // data: ['输电模型', '阿里模型', '百度模型', 'XX模型', 'XX模型']
  },
  yAxis: {
    type: 'value',   
    axisLabel: {
      color: '#8C8C8C'
    },   
    splitLine:{
      show:true,
      lineStyle:{
          width: 1,
          color: '#BFBFBF'
      },
    }
  },
  series: []
}

export const pieOptions: EChartsOption = {
  title: {
    text: '不同能力项\n得分占比',
    show: true,
    left: 'left',
    top: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    top: 'center',
    right: '10%',
    orient: 'vertical',
    icon: 'circle',
    itemWidth: 8,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      rich: {
          a: {
             verticalAlign: 'middle',
          },
      },
      padding:[0,0,-2,0],  //[上、右、下、左]
    }
  },
  color: [
    '#376DF7',
    '#53B997',
    '#6750AA',
    '#F8C541',
    '#294680',
    '#68B2FF',
    '#7A4388',
    '#E883B9',
    '#00827F',
    '#FF9B47'
  ],
  series: [
    {
      name: t('analysis.userAccessSource'),
      type: 'pie',
      radius: ['40%', '70%'],
      center: ['50%', '40%'],
      label: {
        position: 'outside',
        // "offset": 30,
        formatter: '{d}%',
        fontSize: 14
      },
      data: [
        { value: 16, name: '推理能力' },
        { value: 32, name: '问答能力' },
        { value: 23, name: '理解能力' },
        { value: 29, name: '综合能力' }
      ],
      labelLine: {
        // length: 10,
        // length2: 20,
        // smooth: 0.2
      }
    }
  ]
}

export const barOptions: EChartsOption = {
  title: {
    text: t('analysis.weeklyUserActivity'),
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: 50,
    right: 20,
    bottom: 20
  },
  xAxis: {
    type: 'category',
    data: [
      t('analysis.monday'),
      t('analysis.tuesday'),
      t('analysis.wednesday'),
      t('analysis.thursday'),
      t('analysis.friday'),
      t('analysis.saturday'),
      t('analysis.sunday')
    ],
    axisTick: {
      alignWithLabel: true
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: t('analysis.activeQuantity'),
      data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
      type: 'bar'
    }
  ]
}

export const radarOptions: EChartsOption = {
  // title: {
  //   text: '指标得分\n雷达图',
  //   show: false,
  //   left: 'left',
  //   top: 'center',
  // },
  legend: {
    show: false,
    bottom: '0',
    icon: 'circle',
    itemWidth: 8,
    textStyle: {
      fontSize: 14,
      lineHeight: 14,
      rich: {
          a: {
             verticalAlign: 'middle',
          },
      },
      padding:[0,0,-2,0],  //[上、右、下、左]
    }
  },
  tooltip: {
    confine: true
  },
  radar: {
    // shape: 'circle',
    splitArea: {
      show: false,
    },
    // 去掉维度线颜色
    axisLine: {
      show: true,
      lineStyle: {
        color: '#D9D9D9'
      }
    },
    name: {
      textStyle: {
          "color": "8c8c8c"
      }
    },
    splitLine:{
      show:true,
      lineStyle:{
        color: '#D9D9D9'
      }
    },
    indicator: [],
    radius: '70%',
    center: ['50%', '50%']
  },
  series: [
    {
      // name: `xxx${t('workplace.index')}`,
      type: 'radar',
      symbol: 'circle',
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1,
      },
      data: []
    }
  ]
}

